<template>
  <view class="news-card" :style="{ backgroundColor: bgColor }">
    <view class="titlebox">
      <view class="imgbox">
        <image class="image" :src="showImage" v-if="mode==2" @error="handleImageException"></image>
      </view>
      <view class="title" v-if="mode!=3">{{ title }}</view>
      <view>
        <text v-if="mode==3" style="color: #ff557f;">{{title}}</text>
      </view>
    </view>
    <view class="adbox" v-if="mode === 3" style="margin-top: 5rpx; padding: 0 10px;">
      <view class="image-container">
        <image v-for="(item, index) in images" :src="item" mode="aspectFill" @error="handleImageError(index)" class="horizontal-image"></image>
      </view>
    </view>
    <view class="meta">
      <text class="source" :class="{ 'red-source': source === '置顶' }">{{ source }}</text>
      <text class="tag" v-for="(tag, index) in tags" :key="index">{{ tag }}</text> 
      <text style="color: #ff0004;" v-if="mode==3">广告</text>
      <text class="comment">{{ comment }}</text>
      <text class="time">{{ time }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "NewsCard",
  data() {
    return {
      defaultPic: "/static/logo.png",
      status: 'news',
      imageError: false,  
      failPic: "/static/logo.png" 
    };
  },
  computed: {
    showImage() {
      if (this.mode === 2) {
        if (this.images && this.images[0]) {
          return this.imageError ? this.failPic : this.images[0];
        } else {
          console.log("showImage Default--> " + this.title);
          return this.defaultPic;
        }
      }
      return this.defaultPic;
    }
  },
  methods: {
    handleImageError(index) {
      console.log("handleImageError----->index:" + index);
      if (this.images && this.images.length > index) {
        this.$set(this.images, index, this.defaultPic);
      }
    },
    handleImageException() {
      this.imageError = true;
      console.log("handleImageException--> " + this.title);
    }
  },
  props: {
    title: { type: String, required: true }, 
    source: { type: String, required: true }, 
    tags: { type: Array, default: () => [] }, 
    comment: { type: String, required: true }, 
    time: { type: String, required: true }, 
    images: {
      type: Array,
      default: () => []
    },
    mode: {
      type: Number,
      default: 1,
    },
    bgColor: {
      type: String,
      default: '#fff'
    }
  },
};
</script>

<style scoped>
.news-card {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
}
.title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.4;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}
.source {
  margin-right: 6px;
}
.red-source {
  color: red; 
}
.tag {
  margin: 0 4px;
  padding: 2px 4px;
  background-color: #e0f7fa;
  border-radius: 4px;
}
.comment {
  margin: 0 4px;
}
.time {
  margin-left: auto; 
}
.imgbox {
  margin-right: 10px;
}
.image {
  width: 100px;
  height: 100px;
  border-radius: 10rpx;
  object-fit: cover;
}
.titlebox {
  display: flex;
  flex-direction: row;
  padding-left: 10px;
  align-items: flex-start;
}
.image-container {
  display: flex;  
  gap: 8rpx;      
  width: 100%;    
  height: 180rpx; 
}
.horizontal-image {
  flex: 1;       
  border-radius: 10rpx;
  width: 100%;    
  height: 100%;   
  object-fit: cover;  
}
.adbox {
  width: 100%;
  box-sizing: border-box;  
}
</style>